<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>aniamtion动画与交互</title>
  <style>
    /* animation-name:  动画的名称（自定义@keyframes）
       animation-duration  动画持续的时间(单位s   0.2s =  .2s)
       animation-timing-function 动画曲线
       animation-delay: 动画延迟的时间
       animation-iteration-count: infinite; 运动次数 无限次
       animation-direction: alternate; 动画的交替运动
        animation-play-state: paused /running;   动画的运动/暂停
        animation-fill-mode: forwards/both;  动画运动完之后 状态:  forwards  停在结束100%的位置
                             backwards  停在开始0%的位置  
     */
  .red{width: 200px;height: 200px;background-color: red;border-radius: 50%;
    animation-name: RedBox;
    animation-duration: 1s;
    /* linear  ease */
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    
 
    /* animation:RedBox  1s   linear  alternate backwards; */

  }

/* transform: 
+ scale
+ translate
+ rotate
transform:scale() rotate() translate();  
 */
@keyframes RedBox {
  0%{transform: translate(0,0) rotate(0deg);}
  50%{transform: translate(400px,0);}
  100%{transform: translate(800px,0) rotate(360deg);background-color: royalblue;}
}


/* CSS3 动画库  animate.min.css */
  </style>
</head>

<body>
<!-- 
  分为二步:
  1.通过@keyframes 自定义一个动画的名称 
  2.通过animation属性去调用定义好的名称

@keyframes 动画名称{
  0%{}  -  from  
  ......
  100%{}  -  to
}

 -->
<div class="red"></div>
</body>

</html>